<template>
  <div :style="{ ...styles }" class="position-full">
    <el-carousel class="width-100 height-100" :interval="playInterval" v-if="widget.UI.data.mode==='image'">
      <el-carousel-item v-for="(item,index) in list" :key="index">
        <el-image
          class="width-100 height-100"
          :src="item"
          fit="fill"></el-image>
      </el-carousel-item>
    </el-carousel>
    <video v-else :src="widget.UI.data.netVideoList.length>0?widget.UI.data.netVideoList[0]:null"
           class="width-100 height-100 videoElement" loop controls></video>
  </div>
</template>
<script>
  import {assetBaseUrl} from "@/config/env";

  export default {
    name: 'Carousel',
    props: {
      widget: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {};
    },

    computed: {
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      styles() {
        const {rect = {}} = this.widget;
        const styles = {};
        const {height: sHeight = 0} = rect;
        return styles;
      },
      playInterval() {
        return parseInt(`${this.widget.UI.data.playInterval}000`)
      },
      list() {
        if (this.widget.UI.data.netImageList.length > 0) {
          return this.widget.UI.data.netImageList;
        } else {
          const stringArray = this.widget.UI.data.localImageList.map(item => {
            return `${assetBaseUrl}/file/download/${item}`;
          });
          return stringArray;
        }
      }
    },
  };
</script>

<style scoped>

  /deep/ .el-carousel__container {
    width: 100%;
    height: 100%;
  }

  /deep/ .el-carousel__button {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #2d69e0;
  }

  .videoElement {
    object-fit: fill;
  }
</style>
